<template>
  <div class="op">
      <div class="bacimage">
            <img :src="bacimage" alt="">
        </div>
        <div class="topi">
            <img :src="brandimage" alt="">
        </div>
       <p class="ai">{{brandname}}</p>
       <p class="red"><span class="iconfont icon-42"></span><span class="hint">{{brandbrief}}</span></p>
       <div class="pin">
            <p class="tui">-品牌推荐-</p>
            <section>
                <ul class="pint">
                   <Bz v-for="(v,i) in arra" :key="i" :recicake="v.recicake" :recimage="v.recimage" :reciprice="v.reciprice"/>
                </ul>
            </section>
        </div>
        <div class="xia">
            <van-sticky>
            <ul class="s1">
                <li><router-link to="/brand4/era">全部</router-link></li>
                <li > <router-link to="/brand4/erc">销量</router-link></li>
                <li ><router-link to="/brand4/erd">价格</router-link></li>
            </ul> 
            </van-sticky>
            <router-view></router-view>
        </div>
  </div>
</template>

<script>
import Bz from "c/cakeC/brandzi.vue"
import {getlink} from "a/getapi.js"
export default {
    components:{
        Bz
    },
props:{
    bacimage:String,
    brandimage:String,
    brandname:String,
    brandbrief:String
},
data(){
    return {
        arra:[

        ]
    }
},
 mounted(){
     getlink("/tui/data").then((ok)=>{
        //  console.log(ok)
            this.arra=ok.data.tuijian
        })
}
}
</script>

<style scoped>
.bacimage{
    width: 100%;
    height: 2rem;
}
.bacimage img{
    width: 100%;
    height: 100%;
}
.ai{
    text-align: center;
    margin-top: 0.4rem;
    font-size: 0.16rem;
}
.red{
    margin-top: 0.06rem;
    /* line-height: 1rem; */
    padding: 0 0.08rem;
    font-size: 0.12rem;
}
.pic{
    width: 1.4rem;
    height: 1.4rem;
}
.red .iconfont{
    margin-right: 0.04rem;
}

.topi{
    width: 0.6rem;
   
    height: 0.4rem;
    position: absolute;
    top: 2.2rem;
    left: 42%;
}
.topi img{
    width: 100%;
    height: 100%;
}
.tui{
    line-height: 0.2rem;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 0.18rem;
    color: #333;
}
section{
    width: 100%;
    height: 2.12rem;
    text-align: center;
}
.pint{
    margin-top: 0.17rem;
    text-align: left;
    overflow: hidden;
    font-size: 0;
    padding: 0 0.15rem;
    display: flex;
    overflow-x: scroll;
    /* justify-content: space-around;
    flex-wrap: nowrap;
    flex-shrink: inherit; */
}
.router-link-exact-active{
    color:red;
}
.s1{
    border: 0.01rem solid gainsboro;
    line-height: 0.36rem;
    display: flex;
    justify-content: space-around;
    font-size: 0.14rem;
    text-align: center;
    color: black;
    background-color: white;
}
.s1 li{
    color: black;
}
</style>